<template>
    <el-form class="search-form" :inline="true" :model="searchForm" style="display:flex;flex-wrap:wrap">
        <!-- 貨幣 -->
        <el-form-item class="select-item" v-if="searchFormConfig.currency"
            :style="{ order: searchFormConfig.currency.order }">
            <!-- <div class="date-key">{{ searchFormConfig.currency.name }}</div> -->
            <el-select v-model="searchForm.currency" size="large" placeholder="請选择貨幣類型">
                <el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 類型 -->
        <el-form-item class="select-item" v-if="searchFormConfig.operateType"
            :style="{ order: searchFormConfig.operateType.order }">
            <div class="date-key">{{ searchFormConfig.operateType.name }}</div>
            <el-select v-model="searchForm.operateType" size="large" placeholder="請选择操作類型">
                <el-option v-for="item in operateTypes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 日期範圍 -->
        <el-form-item class="date-range-item" v-if="searchFormConfig.date"
            :style="{ order: searchFormConfig.date.order }">
            <div class="date-key">{{ searchFormConfig.date.name }}</div>
            <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="——"
                start-placeholder="開始時間" end-placeholder="結束時間" />
        </el-form-item>
        <!-- 平臺訂單號 -->
        <el-form-item class="input-item" v-if="searchFormConfig.platformOrderId"
            :style="{ order: searchFormConfig.platformOrderId.order }">
            <div class="date-key">{{ searchFormConfig.platformOrderId.name }}</div>
            <el-input v-model="searchForm.platformOrderId" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 商戶訂單號 -->
        <el-form-item class="input-item" v-if="searchFormConfig.merchantOrderId"
            :style="{ order: searchFormConfig.merchantOrderId.order }">
            <div class="date-key">{{ searchFormConfig.merchantOrderId.name }}</div>
            <el-input v-model="searchForm.merchantOrderId" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 订单狀態 -->
        <el-form-item class="select-item" v-if="searchFormConfig.orderStatus"
            :style="{ order: searchFormConfig.orderStatus.order }">
            <div class="date-key">{{ searchFormConfig.orderStatus.name }}</div>
            <el-select v-model="searchForm.orderStatus" size="large" placeholder="請选择操作類型">
                <el-option v-for="item in orderStatuses" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 查詢按鈕 -->
        <el-form-item class="search-btn-item" style="order: 9999">
            <el-button type="primary" class="my-button" @click="onClickSearch">查詢</el-button>
            <el-button type="primary" class="my-button" @click="onClickClear">清空</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { filterEffectObj, dateTransform, getDateAnd7DaysAgo } from "@/utils/index";
import { useSelectOptionsStore } from "@/store/index";
import { OPERATE_TYPES, ORDER_SATUS } from '@/utils/selectOptions';
import { storeToRefs } from "pinia";

const props = defineProps({
    searchFormConfig: {
        type: Object,
        default: () => ({})
    }
});
// 貨幣類型选项
let currencies = ref([]);
// 操作類型选项
const operateTypes = ref(OPERATE_TYPES);

// 订单狀態
const orderStatuses = ref(ORDER_SATUS)

const searchForm = reactive({
    currency: '',
    dateRange: '',
    operateType: '',
    platformOrderId: '',
    merchantOrderId: '',
    orderStatus: '',
});

const emit = defineEmits(['search', 'clear']);

// 点击搜索按钮
const onClickSearch = () => {
    const searchFormFiltered = filterEffectObj(searchForm, (value) => (value !== ''));
    if (searchFormFiltered.dateRange && typeof searchFormFiltered.dateRange[0] !== 'string') {
        searchFormFiltered.dateRange[0] = dateTransform(searchFormFiltered.dateRange[0]);
        searchFormFiltered.dateRange[1] = dateTransform(searchFormFiltered.dateRange[1]);
    }
    emit('search', searchFormFiltered);
}


// 点击清空按钮
const onClickClear = () => {
    searchForm.currency = currencies.value[0].value;
    const { today, sevenDaysAgo } = getDateAnd7DaysAgo();
    searchForm.dateRange = [sevenDaysAgo.date, today.date];
    searchForm.operateType = operateTypes.value[2].value;
    searchForm.platformOrderId = '';
    searchForm.merchantOrderId = '';
    searchForm.orderStatus = '';
    emit('clear');
}

const initSelectOptions = () => {
    // 获取货币选项
    const selectOptionsStore = storeToRefs(useSelectOptionsStore());
    currencies = selectOptionsStore.currencyList;
    console.log("currencies:",currencies)
    searchForm.currency = currencies.value[0].value;
    // 操作類型选项
    searchForm.operateType = operateTypes.value[2].value;
    // 日期范围
    const { today, sevenDaysAgo } = getDateAnd7DaysAgo();
    searchForm.dateRange = [sevenDaysAgo.date, today.date];
}

initSelectOptions();

defineExpose({
    searchForm
});
</script>

<style scoped lang="scss">
.date-key {
    border-radius: 3px;
    background: #979797;
    padding: 0 15px;
    height: 34px;
    color: #FFFFFF;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
    flex-shrink: 0;
}

.search-form {
    :deep(.select-item) {
        .el-form-item__content {
            flex-wrap: nowrap;
            flex-shrink: 0;

            .el-select--large {
                width: 8vw;

                .el-select__wrapper {
                    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
                    height: 34px;
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }
    }

    :deep(.date-range-item) {
        .el-form-item__content {
            flex-wrap: nowrap;
            flex-shrink: 0;
        }

        .el-range-editor.el-input__wrapper {
            height: 34px;
            background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
        }
    }

    :deep(.search-btn-item) {
        .el-form-item__content {
            flex-wrap: nowrap;
            flex-shrink: 0;
        }

        .el-button.el-button--primary {
            width: 140px;
            height: 34px;
            background-color: #2FC2AF;
        }
    }

    :deep(.input-item) {
        .el-form-item__content {
            flex-wrap: nowrap;
            flex-shrink: 0;

            .el-input__wrapper {
                background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
                height: 34px;
            }
        }
    }
}
</style>